import React, { useState, useEffect } from 'react';

/**
 * 错误通知组件
 * 显示用户友好的错误信息
 */
const ErrorNotification = ({ error, onClose }) => {
  const [visible, setVisible] = useState(true);

  useEffect(() => {
    // 5秒后自动隐藏
    const timer = setTimeout(() => {
      setVisible(false);
      if (onClose) onClose();
    }, 5000);

    return () => clearTimeout(timer);
  }, [onClose]);

  if (!visible) return null;

  return (
    <div style={{
      position: 'fixed',
      top: '20px',
      right: '20px',
      backgroundColor: '#ff6b6b',
      color: 'white',
      padding: '15px 20px',
      borderRadius: '8px',
      boxShadow: '0 4px 20px rgba(0,0,0,0.2)',
      zIndex: 10000,
      maxWidth: '400px',
      fontFamily: 'Arial, sans-serif',
      animation: 'slideIn 0.3s ease-out'
    }}>
      <div style={{
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'space-between',
        marginBottom: '10px'
      }}>
        <div style={{
          fontSize: '18px',
          fontWeight: 'bold'
        }}>
          ⚠️ 系统提示
        </div>
        <button
          onClick={() => {
            setVisible(false);
            if (onClose) onClose();
          }}
          style={{
            background: 'none',
            border: 'none',
            color: 'white',
            fontSize: '20px',
            cursor: 'pointer',
            padding: '0',
            width: '24px',
            height: '24px',
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center'
          }}
        >
          ×
        </button>
      </div>
      
      <div style={{
        fontSize: '14px',
        lineHeight: '1.4'
      }}>
        {getErrorMessage(error)}
      </div>
      
      <div style={{
        marginTop: '10px',
        fontSize: '12px',
        opacity: '0.8'
      }}>
        此错误已自动记录，如持续出现请联系技术支持
      </div>
    </div>
  );
};

/**
 * 获取用户友好的错误信息
 */
const getErrorMessage = (error) => {
  if (!error) return '发生了未知错误';
  
  // 根据错误类型返回不同的信息
  if (error.code === 403) {
    return '检测到权限相关错误，这通常是由浏览器扩展引起的，不影响应用正常使用。';
  }
  
  if (error.message && error.message.includes('network')) {
    return '网络连接异常，请检查网络设置后重试。';
  }
  
  if (error.message && error.message.includes('timeout')) {
    return '请求超时，请稍后重试。';
  }
  
  if (error.message && error.message.includes('permission')) {
    return '权限检查失败，这可能是浏览器扩展导致的，应用功能正常。';
  }
  
  return error.message || '发生了未知错误，请刷新页面重试。';
};

export default ErrorNotification;
